<template>
    <div class="page">
        <swiperP :list="bannerList" :height="400"> </swiperP>

        <div class="container">
            <div class="page-title">新闻动态</div>
            <div class="news-list">
                <NewsGroupP :list="renderList" />
            </div>

            <div class="pagination">
                <el-pagination background layout="prev, pager, next, jumper" :total="list.length"
                    :page-size="pagination.size" v-model:current-page="pagination.page" prev-text="上一页" next-text="下一页" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { computed } from "vue";
import { useContent } from ".";

const cacheStore = useCacheStore();

const { list, pagination, bannerList, GetList, GetBannerList } = useContent();

const renderList = computed(() => {
    return list.value.slice(
        (pagination.page - 1) * pagination.size,
        pagination.page * pagination.size
    );
});

watch(() => cacheStore.key, async () => {
    await GetList();
    await GetBannerList(185);
})

await GetList();
await GetBannerList(185);
</script>
<style lang="scss" scoped>
.page {
    background-color: #edf5fa;
}

.bg {
    width: 100%;
    height: 400px;
    background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/news/bg.jpg") no-repeat 50% 0 / cover;
    z-index: 10;
}

.container {
    width: 1200px;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 87px;

    .page-title {
        color: #111;
        font-weight: bold;
        font-size: 30px;
        text-align: center;
    }

    .news-list {
        margin-top: 40px;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 60px;

    :deep(.el-pager) {
        li {
            width: 32px;
            height: 30px;
            border-radius: 6px;
            background-color: #fff;
            font-size: 16px;
            font-weight: 500;
        }
    }

    :deep(.el-pagination) {
        &.is-background {

            .btn-next,
            .btn-prev {
                background-color: #fff;
                padding: 0 10px;
                border-radius: 6px;
            }
        }
    }
}
</style>
